import React from "react";
import { Swiper } from "react-vant";

const Info = () => {
  const navigate = React.Router.useNavigate();
  const [SearchParams] = React.Router.useSearchParams();
  const [business, setBusiness] = React.useState(
    React.Cookies.load("business") || {}
  );
  const [info, setInfo] = React.useState({});
  const [id, setId] = React.useState(SearchParams.get("id") || 0);

  React.useEffect(() => {
    getInfoData();
  }, [id]);


  const getInfoData = async () => {
    let result = await React.Http.POST({
      url: "product/product/info",
      params: {
        id,
        busid: business.id,
      },
    });

    if (result) {
      if (result.code === 0) {
        React.Vant.Notify.show({
          type: "warning",
          message: result.msg,
          duration: 1500,
          onClose: () => {
            navigate(-1);
          },
        });

        return;
      }

      setInfo(result.data);
    }
  };

  const onSelected = () => {
    let data = {
      id: info.id,
      name: info.name,
      rent: info.rent,
      rent_price: info.rent_price,
    };

    React.Cookies.save("product", data, { path: "/" });
  };

  const onBack = () => {
    navigate(-1);
  };

  const Items = () =>{
    if (!info.thumbs_cdn || !info.thumbs_cdn.length) {
      return null; // 如果没有 thumbs_cdn 数据，则返回 null，不渲染轮播图
    }
    return(
      
      <>
      <React.Vant.Swiper autoplay={5000}>
        {info.thumbs_cdn.map((thumb) => (
      <Swiper.Item>
      <React.Vant.Image lazyload src={thumb} />
    </Swiper.Item>
    ))}
    </React.Vant.Swiper>
    </>
  )}

  return (
    <>
      <React.Vant.Sticky>
        <React.Vant.NavBar
          title="商品详情"
          leftText="返回"
          onClickLeft={onBack}
        />
      </React.Vant.Sticky>
      {/* 轮播 */}
      <div className="demo-swiper">
      <Items />
    </div>

      <div className="top_title">
        <h2>
          {info.name}/
          <div dangerouslySetInnerHTML={{ __html: info.content }}></div>
        </h2>
        <div className="money">
          <h3>￥{info.rent}</h3>
          <p>押金:￥{info.rent_price}</p>
        </div>
        <div className="youhuiq common">
          <div className="text">
            <h2>保障</h2>
            <div className="tb">
              <div className="tis_fuwu">
                <ul>
                  <li className="no">保障</li>
                  <li>保障</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div className="youhuiq common common_no">
          <div className="text">
            <h2>配送</h2>
            <div className="tb">送货上门</div>
          </div>
        </div>
      </div>
      <div className="rem2"> </div>

      <div className="zy_goods_foot dis_flex">
        <div className="left">
          <React.Router.NavLink to="/product/product/index">
            <i>
              <img src="/assets/images/icon_goods_dp1.png" />
            </i>
            <span>首页</span>
          </React.Router.NavLink>
          <a>
            <i>
              <img src="/assets/images/icon_goods_dp2.png" />
            </i>
            <span>收藏</span>
          </a>
        </div>
        <p>
          <React.Router.NavLink to="/product/lease/add" onClick={onSelected()}>
            立即租赁
          </React.Router.NavLink>
        </p>
      </div>
    </>
  );
};

export default Info;